<template>
  <div class="main">
    <div
      class="m-sign"
      style=""
    >
      <div class="form">
        <h3><i />儿童青少年运动健康智能管理平台</h3>
        <div class="box">
          <el-form
            v-if="isShow"
            ref="dataForm"
            :model="dataForm"
            :rules="dataRule"
            autocomplete="off"
          >
            <div class="item">
              <span class="left">用户名</span>
              <div class="right">
                <el-form-item
                  class="account-input"
                  prop="account"
                >
                  <el-input
                    ref="account"
                    v-model="dataForm.account"
                    clearable
                    placeholder="账号"
                    autocomplete="off"
                    name="account"
                    prefix-icon="el-icon-user"
                    type="text"
                    @keyup.enter.native="dataFormSubmit"
                  />
                </el-form-item>
              </div>
            </div>
            <div class="item">
              <span class="left">密码</span>
              <div class="right">
                <el-form-item
                  class="account-input"
                  prop="password"
                >
                  <el-input
                    ref="password"
                    v-model="dataForm.password"
                    clearable
                    placeholder="密码"
                    :show-password="true"
                    autocomplete="off"
                    name="password"
                    prefix-icon="el-icon-key"
                    type="password"
                    @keyup.enter.native="dataFormSubmit"
                  />
                </el-form-item>
              </div>
            </div>
            <div class="item">
              <span class="left">验证码</span>
              <div class="right">
                <el-form-item
                  class="code-input"
                  prop="captcha"
                >
                  <el-input
                    ref="code"
                    v-model="dataForm.captcha"
                    placeholder="验证码"
                    autocomplete="off"
                    name="captcha"
                    prefix-icon="el-icon-lock"
                    style="width: 100%"
                    type="text"
                    @keyup.enter.native="dataFormSubmit"
                  />
                </el-form-item>
                <img
                  :src="captchaPath"
                  alt="codeImage"
                  class="code-image"
                  @click="getCaptcha()"
                >
              </div>
            </div>
            <el-button
              :loading="loading"
              class="sub-btn"
              type="primary"
              @click.native.prevent="dataFormSubmit"
            >
              登   录
            </el-button>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { getUUID } from '@/utils'
  export default {
    data () {
      return {
        loading:false,
        dataForm: {
          account: '',
          password: '',
          uuid: '',
          captcha: ''
        },
        dataRule: {
          account: [
            { required: true, message: '帐号不能为空', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '密码不能为空', trigger: 'blur' }
          ],
          captcha: [
            { required: true, message: '验证码不能为空', trigger: 'blur' }
          ]
        },
        captchaPath: '',
        isShow: true
      }
    },
    created () {
      this.getCaptcha()
    },
    methods: {
      // 提交表单
      dataFormSubmit () {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            this.$http({
              url: this.$http.requestUrl('/sys/login'),
              method: 'post',
              data: this.$http.requestData({
                'account': this.dataForm.account,
                'password': this.dataForm.password,
                'uuid': this.dataForm.uuid,
                'captcha': this.dataForm.captcha
              })
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.$cookie.set('token', data.token)
                this.isShow = false
                this.$store.commit('user/updateUserType', data.userType)
                if (data.userType === '1'){
                  this.$router.replace({ name: 'indexSchool' })
                } else if(data.userType === '2') {
                  this.$router.replace({ name: 'indexStudent' })
                } else if(data.userType === '3') {
                  this.$router.replace({ name: 'indexTest3' })
                }  else {
                  this.$router.replace({ name: 'home' })
                }
              } else {
                this.getCaptcha()
                // 重定向到另一地址
                if(data && data.code == 302) {
                  this.$confirm('您有一份问卷需要作答，是否跳转')
                      .then(_ => {
                        window.open(data.msg);
                      })
                      .catch(_ => {});
                } else {
                  this.$message.error(data.msg)
                }
              }
            })
          }
        })
      },
      // 获取验证码
      getCaptcha () {
        this.dataForm.uuid = getUUID()
        this.captchaPath = this.$http.requestUrl(`/captcha.jpg?uuid=${this.dataForm.uuid}`, 'admin')
      }
    }
  }
</script>

<style lang="scss">
$bg: #283443;
$light_gray: #fff;
$cursor: #555;
@supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
    .login-container .el-input input {
        color: $cursor;
    }
}

/* reset element-ui css */
.login-container {
    .el-input {
        display: inline-block;
        input {
            background: transparent;
            border: 0;
            -webkit-appearance: none;
            border-radius: 0;
            color: #000;
            height: 28px;
            caret-color: $cursor;
            &:-webkit-autofill {
                box-shadow: 0 0 0 1000px $bg inset !important;
                -webkit-text-fill-color: $cursor !important;
            }
        }
    }
    .el-form-item {
        border: 1px solid #dedede;
        border-radius: 2px;
        color: #454545;
        transition: all 0.3s;
        &:hover {
            border-color: #57a3f3;
        }
    }
}
</style>
<style lang="scss" scoped>
$bg: #2d3a4b;
$dark_gray: #aaa;
$light_gray: #eee;
.login-container {
    //background-size: cover;
    height: 100vh;
    width: 100%;
    background-image: url(~@/assets/img/background.jpg);
    background-repeat: no-repeat;
    background-position: center;

    .login-title {
      position: absolute;
      left: 10%;
      top: 20%;
      margin-top: -100px;
      font-size: 0.5rem;
      color: #7D7B84;
    }
    .login-info {
        position: absolute;
        left: 15%;
        top: 35%;
        margin-top: -100px;
        color: #fff;
        .title {
            font-size: 1.8rem;
            font-weight: 600;
        }
        .sub-title {
            font-size: 1.5rem;
            margin: 0.3rem 0 0.7rem 1rem;
        }
        .desc {
            font-size: 0.96rem;
            line-height: 1.9rem;
        }
    }
    .login-form {
        position: absolute;
        top: 50%;
        left: 70%;
        margin: -180px 0 0 -160px;
        width: 420px;
        height: 350px;
        padding: 36px;
        background: #fff;
        border-radius: 10px;

        .account-input {
            border-radius: 5px;
        }
        .code-input {
            width: 50%;
            display: inline-block;
            border-radius: 5px;
        }
        .code-image {
            display: inline-block;
            vertical-align: top;
            height: 40px;
            cursor: pointer;
        }
        .login-type {
            text-align: right;
            display: inline-block;
            width: 100%;
        }
        .logo-wrapper {
            display: inline-block;
            margin: 10px 0;
            img {
                width: 1.9rem;
                display: inline-block;
                margin: 0.8rem 0.8rem -0.8rem 0.8rem;
                cursor: pointer;
                &.radius {
                    border-radius: 50%;
                }
            }
        }
    }
    .login-footer {
        position: fixed;
        bottom: 1rem;
        width: 100%;
        text-align: center;
        color: white;
        font-size: 13px;
        line-height: 14px;
        height: 14px;
    }
    .tips {
        font-size: 14px;
        color: #fff;
        margin-bottom: 10px;
        span {
            &:first-of-type {
                margin-right: 16px;
            }
        }
    }
    .title-container {
        position: relative;
        .title {
            font-size: 20px;
            color: rgba(0, 0, 0, 0.85);
            margin: 0 auto 40px auto;
            text-align: center;
            font-weight: bold;
        }
    }
    @media only screen and (max-width: 470px) {
        .thirdparty-button {
            display: none;
        }
    }
    @media screen and (max-width: 1100px) {
        .login-info {
            left: 8%;
        }
    }
    @media screen and (max-width: 970px) {
        .login-form {
            left: 50%;
        }
        .login-info {
            display: none;
        }
    }
}
</style>

<style lang="scss">
.m-sign{position:fixed;top:0;left:0;right:0;bottom:0;background-image: url(~@/assets/img/bg.jpg);background-repeat:no-repeat;background-position:center center;-webkit-background-size:cover;-moz-background-size:cover;-ms-background-size:cover;-o-background-size:cover;background-size:cover;overflow:hidden}
.m-sign .form{width:560px;background-color:#edfdf9;border-radius:25px;-webkit-box-shadow:5px 5px 8px 0 #c9e7e1,-5px -5px 8px 0 rgba(255,255,255,.5);-moz-box-shadow:5px 5px 8px 0 #c9e7e1,-5px -5px 8px 0 rgba(255,255,255,.5);-ms-box-shadow:5px 5px 8px 0 #c9e7e1,-5px -5px 8px 0 rgba(255,255,255,.5);-o-box-shadow:5px 5px 8px 0 #c9e7e1,-5px -5px 8px 0 rgba(255,255,255,.5);box-shadow:5px 5px 8px 0 #c9e7e1,-5px -5px 8px 0 rgba(255,255,255,.5);position:absolute;top:50%;right:177px;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);-o-transform:translateY(-50%);transform:translateY(-50%);padding:80px 10px 71px;overflow:hidden}
.m-sign .form h3{font-size:28px;color:#262626;line-height:1.71em;text-align:center;overflow:hidden}
.m-sign .form h3 i{display:inline-block;vertical-align:middle;width:48px;height:48px;background:url(~@/assets/img/imgl2.png) center center no-repeat;-webkit-background-size:cover;-moz-background-size:cover;-ms-background-size:cover;-o-background-size:cover;background-size:cover;margin-top:-2px;margin-right:8px}
.m-sign .box{padding:0 50px;margin-top:54px}
.m-sign .box:after{content:'';display:block;clear:both;visibility:hidden;width:100%;height:0}
.m-sign .item{margin-bottom:34px}
.m-sign .left{display:block;font-size:24px;color:#2f5a54;line-height:1.25em;font-weight:500;margin-bottom:18px;overflow:hidden}
.m-sign .right{position:relative}
.m-sign .inp{display:block;width:100%;height:60px;font-size:18px;color:#2f5a54;line-height:60px;border:none;background-color:#edfdf9;border-radius:10px;-webkit-box-shadow:0 0 10px #c9e7e1;-moz-box-shadow:0 0 10px #c9e7e1;-ms-box-shadow:0 0 10px #c9e7e1;-o-box-shadow:0 0 10px #c9e7e1;box-shadow:0 0 10px #c9e7e1;padding:0 20px;overflow:hidden}
.m-sign .inp::-webkit-input-placeholder{color:#99b8b4}
.m-sign .inp::-moz-placeholder{color:#99b8b4}
.m-sign .inp::-ms-input-placeholder{color:#99b8b4}
.m-sign .inp2{padding-right:125px}
.m-sign .item .pic{width:85px;height:60px;position:absolute;top:0;right:20px;cursor:pointer;overflow:hidden}
.m-sign .item .pic img{display:block;width:100%;height:100%}
.m-sign .sub-btn{display:block;width:240px;height:60px;font-size:24px;color:#fff;text-align:center;border:none;background-color:#4dbdae;border-radius:10px;-webkit-box-shadow:5px 5px 8px 0 #c9e7e1,-5px -5px 8px 0 rgba(255,255,255,.5);-moz-box-shadow:5px 5px 8px 0 #c9e7e1,-5px -5px 8px 0 rgba(255,255,255,.5);-ms-box-shadow:5px 5px 8px 0 #c9e7e1,-5px -5px 8px 0 rgba(255,255,255,.5);-o-box-shadow:5px 5px 8px 0 #c9e7e1,-5px -5px 8px 0 rgba(255,255,255,.5);box-shadow:5px 5px 8px 0 #c9e7e1,-5px -5px 8px 0 rgba(255,255,255,.5);margin:61px auto 0;overflow:hidden;-webkit-transition:.3s;-moz-transition:.3s;-ms-transition:.3s;-o-transition:.3s;transition:.3s}
.m-sign .sub-btn:hover{opacity:.8;filter:alpha(opacity=80);filter:alpha(Opacity=80);-ms-filter:'progid:DXImageTransform.Microsoft.Alpha(Opacity=80)'}
@media only screen and (max-width:1920px){
.m-sign .form{padding:4.1667vw 10px 3.6979167vw;right:9.21875vw}
.m-sign .box{margin-top:2.8125vw}
.m-sign .item{margin-bottom:1.77083vw}
.m-sign .sub-btn{margin-top:3.077083vw}
}
@media only screen and (max-width:1680px){
}
@media only screen and (max-width:1440px){
.m-sign .form{padding:30px 10px;width:480px}
.m-sign .form h3{font-size:24px}
.m-sign .form h3 i{width:40px;height:40px}
.m-sign .box{margin-top:30px}
.m-sign .item{margin-bottom:20px}
.m-sign .left{font-size:20px;margin-bottom:10px}
.m-sign .inp{height:50px;line-height:50px;font-size:16px}
.m-sign .item .pic{height:50px;width:75px}
.m-sign .sub-btn{margin-top:20px;width:200px;height:50px;font-size:20px;line-height:50px}
}

.code-input {
  width: 60%;
  display: inline-block;
  border-radius: 5px;
}
.code-image {
  display: inline-block;
  vertical-align: top;
  height: 40px;
  cursor: pointer;
}

</style>
